<template>
    <div>
        <h1>生命周期</h1>
        <div id="msg">{{msg}}</div>
        <button @click="handlerEditData">更新状态</button>

    </div>
</template>

<script>
/*
 生命周期钩子函数 
   加载阶段： [自动触发]
      1. beforeCreate :data 和methods 等属性并没有创建完成
      2. created：  data 和methods 等属创建完成 页面还没有创建dom节点 【常用】
      3. beforeMount
      4. mounted： data 和methods 等属创建完成 页面已经创建dom节点并且数据渲染完成 【常用】
   created【dom节点未生成】：/ mounted【dom节点生成】：  
      使用场景： 页面在初始化加载时 发送ajax请求数据  将请求的是数据保存在状态中 
   
      更新阶段: [修改状态]
      beforeUpdate
      updated
   销毁阶段：[生命周期结束] 关闭资源 或者清除定时器
      beforeDestroy()  
      destroyed()

*/
export default {
    data() {
        return {
            msg:"小明",
            msg2:"小红"
        }

    },
    methods:{
        handlerEditData() {
            this.msg = "吉姆"

        }

    },
    beforeCreate() {
        // data 和 methods 等属性 并没有创建完成
        console.log("beforeCreate()",this.msg); // 无法获取data中的数据
        console.log("=================================");

    },
    created() {
        // data 和 methods 等属性创建完成 但是节点没有挂载
        console.log("created()",this.msg);
        const msgNode = document.querySelector("#msg")
        console.log(msgNode);
        console.log("=================================");
        // const value = msgNode.innerHTML;
        // console.log(value);
        this.clearTime = setInterval(() => {
            console.log("我是定时器....");

        },1000)
    },
    beforeMount() {
        console.log("beforeMount()");
        const msgNode = document.querySelector("#msg")
        console.log(msgNode);
    },
    mounted() {
        console.log("mounted()");
        const msgNode = document.querySelector("#msg")
        console.log(msgNode.innerHTML);
        console.log("=================================");
     
    },
    beforeUpdate() {
        // 数据更新之后 页面更新之前
        console.log("beforeUpdate()",this.msg);
        const msgNode = document.querySelector("#msg")
        console.log(msgNode.innerHTML);
        console.log("=================================");
    },
    
    updated() {
        // 数据更新之后 页面更新完成
        console.log("updated()",this.msg);
        const msgNode = document.querySelector("#msg")
        console.log(msgNode.innerHTML);
        console.log("=================================");
    },
    beforeDestroy() {
        console.log("beforeDestroy()...");
    },
    destroyed() {
        console.log("destroyed()...");
        clearInterval( this.clearTime)
    }
};
</script>

<style>

</style>
